<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:36:35
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-21 10:48:03
-->
<template>
  <div class="p-4">
    <Card title="门店设置" :loadding="loading">
      <BasicForm @register="formRegister">
        <!-- 地图选择地址组件 -->
        <template #address>
          <div class="address-box">
            <a-button class="btn" @click="changeMap">
              {{ isMap ? '关闭地图' : '打开地图' }}
            </a-button>
            <AmapBox
              @change="getAddress"
              height="25em"
              v-if="isMap"
              :defaultValue="{
                lng: store.jd,
                lat: store.wd,
              }"
              :store="store"
            />
            <TextArea
              class="input-box"
              placeholder="详细地址"
              :disabled="true"
              v-model:value="addressObj.fromData.detail"
            />
          </div>
        </template>
      </BasicForm>
      <a-button class="ml-3" @click="save" type="primary">保存</a-button>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Card, Input } from 'ant-design-vue';
  import { reactive, ref, onMounted } from 'vue';
  import { dayTimes, formSchemas } from './store.data';
  import { storeDetail, updateStoreInfo } from '/@/api/store';
  import { StoreInfoModel } from './model/storeModel';
  import { BasicForm, useForm } from '/@/components/Form';
  import { AmapBox } from './components/amap';
  import moment from 'moment';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { StoreFormParams, TimeWeekType } from '/@/api/store/model/storeModel';
  const { createMessage } = useMessage();
  const TextArea = Input.TextArea;
  const [formRegister, { validate, setFieldsValue }] = useForm({
    schemas: formSchemas,
    layout: 'horizontal',
    labelWidth: 120,
    showResetButton: false,
    showSubmitButton: false,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  // 属性定义
  const store = ref<StoreInfoModel>({});
  // 地图地址信息
  let addressObj = reactive({
    fromData: {
      jd: '', // 经度
      wd: '', // 纬度
      detail: '', // 详细地址
    },
  });
  const loading = ref(false); // 是否处于加载中
  const isMap = ref(false); // 定义是否显示地图
  // 关闭、打开地图
  const changeMap = () => {
    isMap.value = !isMap.value;
  };
  // 获取门店信息+初始化表单
  const getStore = async () => {
    loading.value = true;
    let { storeInfo } = await storeDetail();
    loading.value = false;
    store.value = storeInfo;
    let startTime = storeInfo?.time_week?.length
      ? moment(storeInfo?.time_week[0].start_time).format('HH:mm:ss')
      : null;
    let endTime = storeInfo?.time_week?.length
      ? moment(storeInfo?.time_week[0].end_time).format('HH:mm:ss')
      : null;
    store.value.startTime = moment(startTime, 'HH:mm:ss');
    store.value.endTime = moment(endTime, 'HH:mm:ss');
    store.value.status =storeInfo?.status==='1'?true:false
    store.value.timeWeekArr = storeInfo.time_week.map((v) => v.week_day);
    if (store.value.detail) {
      addressObj.fromData.detail = store.value.detail;
    }
    setFieldsValue(store.value);
  };

  // 获取地址
  function getAddress(params, lngLat) {
    const { detail } = params;
    addressObj.fromData.detail = detail;
    const { lng, lat } = lngLat;
    setFieldsValue({
      jd: lng,
      wd: lat,
      detail,
    });
  }

  // 保存修改内容
  const save = () => {
    loading.value = true;
    validate().then((res) => {
      // 更新门店信息
      let form = {} as StoreFormParams;
      form.start_time = moment(res.startTime).valueOf();
      form.end_time = moment(res.endTime).valueOf();
      if (form.start_time >= form.end_time)
        return createMessage.error({
          content: '营业时间有误',
        });
      form.is_pickup = res.is_pickup ? 1 : 0;
      form.status = res.status ? 1 : 2;
      form.time_week = dayTimes
        .filter((v) => res.timeWeekArr.includes(v.week_day))
        .map((v) => {
          return {
            start_time: form.start_time,
            end_time: form.end_time,
            name: v.name,
            week_day: v.week_day,
          };
        }) as TimeWeekType[];
      form = { ...res, ...form };
      updateStoreInfo({ form, storeId: store.value.store_id })
        .then(({ status, message }) => {
          status === 200 ? createMessage.success(message) : createMessage.error(message);
        })
        .catch(() => {
          createMessage.error('出错误');
        })
        .finally(() => {
          loading.value = false;
        });
    });
  };

  onMounted(() => {
    getStore();
  });
</script>

<style scoped lang="less">
  .ml-3 {
    margin-left: 9em;
    margin-top: 2em;
    width: 10em;
  }

  .address-box {
    display: flex;
    flex-direction: column;

    .btn {
      margin-bottom: 0.5em;
      width: 10em;
    }

    .input-box {
      width: 50em;
      margin-top: 0.5em;
    }
  }
</style>
